import React, { useState, useEffect } from 'react'
import { Tabs, NavBar, Toast, Sticky } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { ArrowSize8, ArrowLeft } from '@nutui/icons-react'
import { useNavigate } from "react-router-dom"
import axios from 'axios'
import Item from 'antd-mobile/es/components/dropdown/item'

export default function Recipe() {
    const [tab1value, setTab1value] = useState('0')
    const [currentTime, setCurrentTime] = useState(getCurrentTime())
    const [list, setList] = useState([])
    let Navigate = useNavigate()

    function getCurrentTime() {
        let date = new Date();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        minutes = (minutes < 10 ? '0' : '') + minutes;
        return `${hours}:${minutes}`;
    }

    useEffect(() => {
        getlist()
        const intervalId = setInterval(() => {
            setCurrentTime(getCurrentTime());
        }, 3000);
        return () => clearInterval(intervalId);
    }, []);

    let getlist = async () => {
        let { data: { data } } = await axios.get('http://localhost:3000/tmbrxlist')
        setList(data)
    }
    return (
        <div>
            <div style={{ backgroundColor: "white", width: "414px", height: "46px", lineHeight: "46px", top: 0 }}>
                <p style={{ float: "left", fontSize: "18px", position: "relative", left: "15px", top: "0px" }}>{currentTime}</p>
                <span style={{ float: "right", marginRight: "14px", marginTop: "2px" }}>
                    <svg style={{ margin: "0px 2px" }} t="1721620058419" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10971" width="18" height="18"><path d="M0 704h208v192H0zM272 512h208v384H272zM544 288h208v608H544zM816 128h208v768H816z" p-id="10972" fill="#2c2c2c"></path></svg>
                    <svg style={{ margin: "0px 2px" }} t="1721619897930" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2615" width="18" height="18"><path d="M0 352.832l93.12 98.752c231.296-245.44 606.464-245.44 837.76 0L1024 352.832C741.44 53.056 283.008 53.056 0 352.832z m372.352 395.008L512 896l139.648-148.16c-76.8-81.92-202.048-81.92-279.296 0zM186.24 550.4l93.12 98.752c128.448-136.32 336.96-136.32 465.408 0L837.824 550.4c-179.648-190.592-471.488-190.592-651.648 0z" fill="#000000" p-id="2616"></path></svg>
                    <svg style={{ position: "relative", top: "2px" }} t="1721620142022" className="icon newdc" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12310" width="25" height="25"><path d="M167.4 374.1h620.3v275.7H167.4z" p-id="12311" fill="#2c2c2c"></path><path d="M930.1 408.6H891V305.2c0-19-15.5-34.5-34.5-34.5h-758c-18.9 0-34.5 15.5-34.5 34.5v413.5c0 18.9 15.5 34.5 34.5 34.5h758.2c18.9 0 34.5-15.5 34.5-34.5V615.4h39.1c16.5 0 29.9-13.4 29.9-29.9v-147c-0.2-16.4-13.6-29.9-30.1-29.9zM822.2 684.3H132.9V339.7h689.2v344.6z" p-id="12312" fill="#2c2c2c"></path></svg>
                </span>
            </div>
            <div style={{ position: "relative", top: -10, }}>
                <div style={{ width: "414px" }}>
                    <NavBar style={{ width: "100%", marginTop: "-50px", backgroundColor: "white", }}
                        titleAlign="left"
                        back={<ArrowLeft />}
                        onBackClick={() => { Navigate(-1) }}>
                        <div >我的处方</div>
                    </NavBar>
                </div>
            </div>
            <div style={{ marginTop: "-20px" }}>
                <Tabs
                    value={tab1value}
                    onChange={(value) => { setTab1value(value) }}>
                    <Tabs.TabPane title="审核未通过">
                        {
                            list.filter(item => item.flag === 0).map(item => (
                                <div key={item._id} style={{ margin: "10px" }}>
                                    <div>
                                        <span style={{ marginRight: '10px' }}>患者</span>
                                        <span style={{ marginRight: '10px' }}>{item.name}</span>
                                        <span style={{ marginRight: '10px' }}>{item.sex}</span>
                                        <span>{item.age}岁</span>
                                    </div>
                                    <div style={{ marginTop: '10px' }}>
                                        <span>{item.diagnosis}</span>
                                    </div>
                                    <div style={{ marginTop: '10px' }}>
                                        <span>{item.opinion}</span>
                                    </div>
                                    <div onClick={() => { Navigate("/detail?id=" + item._id) }} style={{ position: "relative", bottom: 35, left: 340 }}>
                                        <ArrowSize8 />
                                    </div>
                                    <div style={{ textAlign: "right", marginTop: '10px' }}>
                                        <button style={{ backgroundColor: "#0079FE", border: "none", color: "white", borderRadius: "16px", padding: "5px 10px" }}>重新开方</button>
                                    </div>
                                </div>
                            ))
                        }
                    </Tabs.TabPane>
                    <Tabs.TabPane title="审核中">
                        {
                            list.filter(item => item.flag === 1).map(item => (
                                <div key={item._id} style={{ margin: "10px" }}>
                                    <div>
                                        <span style={{ marginRight: '10px' }}>患者</span>
                                        <span style={{ marginRight: '10px' }}>{item.name}</span>
                                        <span style={{ marginRight: '10px' }}>{item.sex}</span>
                                        <span>{item.age}岁</span>
                                    </div>
                                    <div style={{ marginTop: '10px' }}>
                                        <span>{item.diagnosis}</span>
                                    </div>
                                    <div style={{ marginTop: '10px' }}>
                                        <span>{item.opinion}</span>
                                    </div>
                                    <div onClick={() => { Navigate("/detail?id=" + item._id) }} style={{ position: "relative", bottom: 35, left: 340 }}>
                                        <ArrowSize8 />
                                    </div>
                                </div>
                            ))
                        }
                    </Tabs.TabPane>
                    <Tabs.TabPane title="审核通过">
                        {
                            list.filter(item => item.flag === 2).map(item => (
                                <div key={item._id} style={{ margin: "10px" }}>
                                    <div>
                                        <span style={{ marginRight: '10px' }}>患者</span>
                                        <span style={{ marginRight: '10px' }}>{item.name}</span>
                                        <span style={{ marginRight: '10px' }}>{item.sex}</span>
                                        <span>{item.age}岁</span>
                                    </div>
                                    <div style={{ marginTop: '10px' }}>
                                        <span>{item.diagnosis}</span>
                                    </div>
                                    <div style={{ float: "right", marginTop: '-40px', color: 'red' }}>
                                        <span>{item.flag === 2 ? "未支付" : "已支付"}</span>
                                    </div>
                                    <div style={{ marginTop: '10px' }}>
                                        <span>{item.opinion}</span>
                                    </div>
                                    <div onClick={() => { Navigate("/detail?id=" + item._id) }} style={{ position: "relative", bottom: 35, left: 340 }}>
                                        <ArrowSize8 />
                                    </div>
                                </div>
                            ))
                        }
                        {
                            list.filter(item => item.flag === 3).map(item => (
                                <div key={item._id} style={{ margin: "10px" }}>
                                    <div>
                                        <span style={{ marginRight: '10px' }}>患者</span>
                                        <span style={{ marginRight: '10px' }}>{item.name}</span>
                                        <span style={{ marginRight: '10px' }}>{item.sex}</span>
                                        <span>{item.age}岁</span>
                                    </div>
                                    <div style={{ marginTop: '10px' }}>
                                        <span>{item.diagnosis}</span>
                                    </div>
                                    <div style={{ float: "right", marginTop: '-40px', color: 'red' }}>
                                        <span>{item.flag === 2 ? "未支付" : "已支付"}</span>
                                    </div>
                                    <div style={{ marginTop: '10px' }}>
                                        <span>{item.opinion}</span>
                                    </div>
                                    <div onClick={() => { Navigate("/detail?id=" + item._id) }} style={{ position: "relative", bottom: 35, left: 340 }}>
                                        <ArrowSize8 />
                                    </div>
                                </div>
                            ))
                        }
                    </Tabs.TabPane>
                </Tabs>
            </div>
        </div>
    )
}